<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue/vue.js"></script>
</head>
<body>

<div id="app">
   <layout>
       <template v-slot:header="slot1">
           <p>{{slot1.message}}</p>
       </template>
       <!--      v-slot:main  简化写法   #main    -->
       <template #main="slot2">
           <p>{{slot2.message}}</p>
       </template>

       <template v-slot:footer="slot3">
           <p>{{slot3.message}}</p>
       </template>
   </layout>
</div>

<script>

    let layout = {
        template: `
            <div>
                <div id="header">
                    <slot name="header" :message="message1"></slot>
                </div>
                <div id="main">
                    <slot name="main" :message="message2"></slot>
                </div>
                <div id="footer">
                    <slot name="footer" :message="message3"></slot>
                </div>
            </div>
        `,
        data(){
            return{
                message1:'这是插槽内容1',
                message2:'这是插槽内容2',
                message3:'这是插槽内容3'
            }
        }
    }
    let vm = new Vue({
        el:'#app',
        data:{},
        methods:{},
        components:{
            layout
        }
      })
</script>



</body>
</html>
